<template>
	<view class="content">
		<!-- 缴费列表 -->
		<view class="pay_list">
			<view class="pay_item" :class=" currentType == 1? 'isSelectItem':''" @click="payBtn('electr',0)">
				<image :src=" currentType == 1? selImgList[0].selImg : selImgList[0].notImg"></image>
			</view>
			<view class="pay_item" :class=" currentType == 2? 'isSelectItem':''" @click="payBtn('water',1)">
				<image :src=" currentType == 2? selImgList[1].selImg : selImgList[1].notImg"></image>
			</view>
			<view class="pay_item" :class=" currentType == 3? 'isSelectItem':''" @click="payBtn('property',2)">
				<image :src=" currentType == 3? selImgList[2].selImg : selImgList[2].notImg" mode=""></image>
			</view>
		</view>
		
		<!-- 余额详情 -->
		<view class="pay_balance txt_shadow" v-if="currentType == 1">
			<view class="balance_fl">
				<text>{{headData.electricity_bill_balance||0}}</text>
				<text>剩余金额/元</text>
			</view>
			<view class="balance_fr">
				<text>本月消费/元:</text>
				<text>{{headData.electric_month||0}}</text><br>
				<text>累计消费/元:</text>
				<text>{{headData.electric_total||0}}</text>
			</view>
		</view>
		<!--水费剩余 -->
		<view class="pay_balance2 txt_shadow" v-if="currentType == 2">
			<view class="balance_fl">
				<text>{{headData.water_bill_balance||0}}</text>
				<text>剩余金额/元</text>
			</view>
			<view class="balance_fr">
				<text>本月消费/元:</text>
				<text>{{headData.water_month||0}}</text><br>
				<text>累计消费/元:</text>
				<text>{{headData.water_total||0}}</text>
			</view>
		</view>
		<!--物业费剩余 -->
		<view class="pay_balance3 txt_shadow" v-if="currentType == 3">
			<view class="balance_fl">
				<text>{{headData.property_bill_balance||0}}</text>
				<text>剩余金额/元</text>
			</view>
			<view class="balance_fr">
				<text>累计消费/元:</text>
				<text>{{headData.property_total||0}}</text>
			</view>
		</view> 
		<!-- 缴费方式 -->
		<view class="pay_way" v-if="currentType != 3">
			<!-- 缴费金额 -->
			<view class="pay_amount">
				<text class="amount_mz">缴费面值</text>
				<view class="amount_list">
					<text class="amount_item" :cd="current" :class="{isSelectAmount:current == 1}" @click="btnAmount(1)">10元</text>
					<text class="amount_item"  :class="{isSelectAmount:current == 2}" @click="btnAmount(2)">50元</text>
					<text class="amount_item"  :class="{isSelectAmount:current == 3}" @click="btnAmount(3)">100元</text>
				</view>
				<!-- #ifdef H5 -->
				<input class="pay_input" v-model="amount" type="number" placeholder="输入其他充值面额">
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<input class="pay_input" v-model="amount" type="digit" placeholder="输入其他充值面额">
				<!-- #endif -->
			</view>
			<!-- 支付方式 -->
			<view class="way">
				<h2 class="way_zffs">支付方式</h2>
				<!-- <view class="zffs_item">
					<image class="item_img" :src="imgUrl+'/static/wap/payImg/zhi@2x.png'"></image>
					<text>支付宝支付</text>
					<label class="item_radio">
						<image :src="imgUrl+'/static/wap/payImg/ord_n@2x.png'" mode="" class="payBtnImg" v-if="payType==1" @click="payBtnClick(2)"></image>
						<image :src="imgUrl+'/static/wap/payImg/ord_s@2x.png'" mode="" class="payBtnImg" v-if="payType==2"></image>
					</label>
				</view> -->
				<view class="zffs_item">
					<image class="item_img" :src="imgUrl+'/static/wap/payImg/wei@2x.png'"></image>
					<text>微信支付</text>
					<label class="item_radio">
						<image :src="imgUrl+'/static/wap/payImg/ord_n@2x.png'" mode="" class="payBtnImg" v-if="payType==2" @click="payBtnClick(1)"></image>
						<image :src="imgUrl+'/static/wap/payImg/ord_s@2x.png'" mode="" class="payBtnImg" v-if="payType==1"></image>
					</label>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		
		 <!-- #ifdef MP-WEIXIN -->
		<view class="pay_btn" v-if="currentType != 3" @click="xiaocpay">
			<text>提 交</text>
		</view>
       <!-- #endif -->
	   <!-- #ifdef H5 -->
	   		<view class="pay_btn" v-if="currentType != 3" @click="payH5">
	   			<text>提 交</text>
	   		</view>
	   <!-- #endif -->
		<!-- 物业页面显示 -->
		<view>
			<!-- 住户小区地址 (未欠费页面)-->
			<view class="pay_address" v-if="currentType == 3">
				<text>{{settlementDetails.community_name+settlementDetails.room_id}}</text>
			</view>
			<!-- 缴费账单 (未欠费页面)-->
			<view class="pay_jfzd" v-if="currentType == 3">
				<view class="jfzd_top">
					<text @click="btnBill(1)" :class="currentBill == 1? 'isShowBill':''">待缴账单</text>
					<text @click="btnBill(2)" :class="currentBill == 2? 'isShowBill':''">预缴费用</text>
				</view>
				<!-- <view class="jfzd_con">
					<text>待缴总金额：</text>
					<text>￥00.00</text>
				</view> -->
			</view>
			<!-- 预缴费用 -- 欠费页面 -->
			<view class="pay_prepaid" v-if="currentType == 3 && currentBill == 2">
				<view class="prepaid_list">
					<view class="prepaid_item">
						<!-- settlementDetails2.pending -->
						<text>预缴总金额: <text style="color: #F99600; font-size: 34rpx;">￥{{wantPay||0}}</text> <!-- <text style="font-size: 28rpx;">（包含未缴清金额366.00元）</text> --></text>
					</view>
					<view class="prepaid_item">
						<text>预缴时间</text>
						<view class="item_sele" @click="displaySele">
							<text>选择月份</text>
							<image class="sele_down" v-if="!isShowSele" :src="imgUrl+'/static/wap/img/down@2x.png'"></image>
							<image class="sele_down" v-if="isShowSele" :src="imgUrl+'/static/wap/img/up@2x.png'"></image>
						</view>  
					</view>
					<!-- 时间选择列表 -->
					<view class="behalf_list behalf_list_special" v-if="isShowSele">
						<view class="behalf_item behalf_item_special " >
						<checkbox-group @change="checkboxChange">
							<view class="behalf_item2">
								<view class="item2_con">
									<view class="item2_con_list behalf_list_special" v-if="isShowSele">
										<view v-for="(v,n) in monthList" v-if="v.isShow">
										<view class="check_box" @click="clickRadio(v)">
											<!-- /static/wap/img/up@2x.png -->
											<!-- /static/wap/infoImg/check_false.png -->
											<image :src="imgUrl+'/static/wap/infoImg/check_dis.png'" v-if="v.flag&&v.isDis" mode=""></image>
											<image :src="imgUrl+'/static/wap/infoImg/check_true.png'" v-if="v.flag&&!v.isDis" mode=""></image>
											<image :src="imgUrl+'/static/wap/infoImg/check_false.png'" v-if="!v.flag" mode=""></image>
											<view class="item2_con_item">{{v.txt}}</view> 
										</view> 
										</view>
									</view>
								</view>
							</view>
							</checkbox-group>
						</view>
					</view>
<!-- 					<view class="sele_list" v-if="isShowSele"> 
					<block v-for="item in monthList" :key="item.index">
						<view class="sele_item" @click="changeSele(item.txt)">{{item.txt}}</view>  
					</block>
					</view> -->
				</view>
				<!-- 项目选择 -->
<!-- 				<navigator class="prepaid_sel" url="../prestoreDeta/prestoreDeta">
					<text>预存项目</text>
					<image :src="imgUrl+'/static/wap/img/fei_arrow@2x.png'"></image>
					<text>预存明细</text>
				</navigator> -->
				<!-- 支付方式 -->
				<view class="way">
					<h2 class="way_zffs">支付方式</h2>
				<!-- 	<view class="zffs_item">
						<image class="item_img" :src="imgUrl+'/static/wap/payImg/zhi@2x.png'"></image>
						<text>支付宝支付</text>
						<label class="item_radio">
							<image :src="imgUrl+'/static/wap/payImg/ord_n@2x.png'" mode="" class="payBtnImg" v-if="payType==1" @click="payBtnClick(2)"></image>
							<image :src="imgUrl+'/static/wap/payImg/ord_s@2x.png'" mode="" class="payBtnImg" v-if="payType==2"></image>
						</label>
					</view> -->
					<view class="zffs_item">
						<image class="item_img" :src="imgUrl+'/static/wap/payImg/wei@2x.png'"></image>
						<text>微信支付</text>
						<label class="item_radio">
							<image :src="imgUrl+'/static/wap/payImg/ord_n@2x.png'" mode="" class="payBtnImg" v-if="payType==2" @click="payBtnClick(1)"></image>
							<image :src="imgUrl+'/static/wap/payImg/ord_s@2x.png'" mode="" class="payBtnImg" v-if="payType==1"></image>
						</label>
					</view>
					<!-- 提交按钮 -->
<!-- 					<view class="pay_btn" v-if="currentType == 3" @ style="margin: 30rpx 0;">
						<text>提 交</text>
					</view> -->
							 <!-- #ifdef MP-WEIXIN -->
							 <!-- xiaocpay -->
							<view class="pay_btn" v-if="currentType == 3" @click="beforePay(2,'wx')">
								<text>提 交</text>
							</view>
					       <!-- #endif -->
						   
						   <!-- #ifdef H5 -->
						   <!-- payH5 -->
						   		<view class="pay_btn" v-if="currentType == 3" @click="beforePay(2,'h5')">
						   			<text>提 交</text>
						   		</view>
						   <!-- #endif -->
				</view>

			</view>
			<!-- 待缴费用 -- 欠费页面 -->
			<view class="pay_behalf" v-if="currentType == 3 && currentBill == 1">
				<view class="behalf_top">
					<text>待缴总金额：</text>
					<text>￥{{needPay||"0"}}</text>
				</view>
				<!-- 明细列表 -->
				<view class="behalf_list">
					<view class="behalf_item">
						<!-- <text class="behalf_item_txt">2020</text> -->
						<view class="behalf_item2">
							<!-- <view class="item2_top">
								<text>合计：￥263.00</text>
								<text>未缴清</text>
							</view> --><!-- 目前不清楚 -->
							<view class="item2_con">
								<view @click="displayDeta">
									<text class="item2_con_mx">明细</text>
									<image class="item2_img" v-if="!showDeta" :src="imgUrl+'/static/wap/img/down@2x.png'" mode=""></image>
									<image class="item2_img" v-if="showDeta" :src="imgUrl+'/static/wap/img/up@2x.png'" mode=""></image>
								</view>
								<view class="item2_con_list" v-if="showDeta">
									<block v-for="(item,index) in settlementDetails.need_arr" :key="index">
										<!-- :class="{item2_con_item_special_pay:item.pay_status==1,item2_con_item_special_nopay:item.pay_status==0}" -->
										<view class="item2_con_item item2_con_item_special" >￥{{item.one_price}} 物业费 {{item.month}} 
										<span v-if="item.pay_status==0" class="nopay_span">(未缴费)</span>
										<span v-if="item.pay_status!=0" class="nopay_span">(已缴费)</span>
										</view> 
									</block> 
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 支付方式 -->
				<view class="way">
					<h2 class="way_zffs">支付方式</h2>
				<!-- 	<view class="zffs_item">
						<image class="item_img" :src="imgUrl+'/static/wap/payImg/zhi@2x.png'"></image>
						<text>支付宝支付</text>
						<label class="item_radio">
							<image :src="imgUrl+'/static/wap/payImg/ord_n@2x.png'" mode="" class="payBtnImg" v-if="payType==1" @click="payBtnClick(2)"></image>
							<image :src="imgUrl+'/static/wap/payImg/ord_s@2x.png'" mode="" class="payBtnImg" v-if="payType==2"></image>
						</label>
					</view> -->
					<view class="zffs_item" >
						<image class="item_img" :src="imgUrl+'/static/wap/payImg/wei@2x.png'"></image>
						<text>微信支付</text>
						<label class="item_radio">
							<image :src="imgUrl+'/static/wap/payImg/ord_n@2x.png'" mode="" class="payBtnImg" v-if="payType==2" @click="payBtnClick(1)"></image>
							<image :src="imgUrl+'/static/wap/payImg/ord_s@2x.png'" mode="" class="payBtnImg" v-if="payType==1"></image>
						</label>
					</view>
					<!-- 确认充值 -->
					 <!-- #ifdef H5 -->
					 <!-- wxpay -->
					<view class="recharge" @click="beforePay(1,'h5')">
						<text>￥{{needPay||"0"}}</text>
						<text>确定</text>
					</view>
					 <!-- #endif -->
					 <!-- #ifdef MP-WEIXIN -->
					 <!-- xiaocpay -->
					 <view class="recharge" @click="beforePay(1,'wx')">
					 	<text>￥{{needPay||"0"}}</text>
					 	<text>确定</text>
					 </view>
					  <!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
	import util from '../../static/util.js'
    //#ifdef H5
	var jweixin = require('../../components/jweixin-module/index.js');
	//#endif
	export default { 
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				// 当前选中金额
				current: '',
				// 当前选择缴费类型
				currentType: 1,
				// 选择的图片高亮
				selImgList: [{
						notImg: 'https://nengyuan.chuangxiangdianli.com/static/wap/payImg/dian_n@2x.png',
						selImg: 'https://nengyuan.chuangxiangdianli.com/static/wap/payImg/dain_s@2x.png'
					},
					{
						notImg: 'https://nengyuan.chuangxiangdianli.com/static/wap/payImg/shui_n@2x.png',
						selImg: 'https://nengyuan.chuangxiangdianli.com/static/wap/payImg/shui_s@2x.png'
					},
					{
						notImg: 'https://nengyuan.chuangxiangdianli.com/static/wap/payImg/wu_n@2x.png',
						selImg: 'https://nengyuan.chuangxiangdianli.com/static/wap/payImg/wu_s@2x.png'
					}
				],
				// 选择的金额
				amount: "",
				currentBill: 1,
				// 是否显示选择框
				isShowSele: false,
				// 是否显示明细列表
				showDeta: false,
				// 月份
				month:'6个月',
				monthList:[
					{txt:'1月', index:1,flag:false,isDis:false,isShow:false},
					{txt:'2月', index:2,flag:false,isDis:false,isShow:false},
					{txt:'3月', index:3,flag:false,isDis:false,isShow:false},
					{txt:'4月', index:4,flag:false,isDis:false,isShow:false},
					{txt:'5月', index:5,flag:false,isDis:false,isShow:false},
					{txt:'6月', index:6,flag:false,isDis:false,isShow:false},
					{txt:'7月', index:7,flag:false,isDis:false,isShow:false},
					{txt:'8月', index:8,flag:false,isDis:false,isShow:false},
					{txt:'9月', index:9,flag:false,isDis:false,isShow:false},
					{txt:'10月', index:10,flag:false,isDis:false,isShow:false},
					{txt:'11月', index:11,flag:false,isDis:false,isShow:false},
					{txt:'12月', index:12,flag:false,isDis:false,isShow:false}
				],
				// 明细列表
				detaList:[
					{text: '￥200     物业费     2020.06.01至2020.06.31' },
					{text: '￥200     维修费     2020.06.05维修' }
				],
				payType:1,
				settlementDetails:'',
				settlementDetails2:'',
				headData:{},
				choseMonth:[],
				wantPay:'',
				needPay:'',
				one_price:'',
				choseMonthCount:0,
				comIndex:0    ,//进来的次数
				commitData:{}
			};
		},
		watch: {
			amount(newValue, oldValue) {
				console.log(newValue)
				if(newValue!=10&&newValue!=50&&newValue!=100){
					this.current=""
				}
			},
			currentType(newValue,oldValue){
				if(newValue==3){
					this.showSettlementDetailsApi()
					this.showPropertyApi()//物业费缴费详细页面
					//显示物业费缴纳详细
					this.getNeedpay()
					this.getPropertyPlanApi()
				}
			}
		},
		onLoad(opt){
			//获取收费方案1,电费，2,水费，3，物业费
			if(opt.type==3){
				this.currentType=3

			}else if(opt.type==2){
				this.currentType=2
			}
			console.log(opt.type)

			this.getHeaddata()

		},
		onShow() {
			if(this.comIndex>0){
				this.getHeaddata()
				//显示物业费缴纳详细
				if(this.currentType==3){
					this.getPropertyPlanApi()
					this.showSettlementDetailsApi()
								this.showPropertyApi()//物业费缴费详细页面
								this.getNeedpay()
				}
			}
		},
		onHide() {
			this.comIndex=this.comIndex+1
		},
		mounted() {  
			// 进入页面后刷新当前页
			uni.redirectTo({
			    url: '../payPage/payPage.vue' 
			});
		},
		methods: {
			// 获取物业待缴账单
			getNeedpay(){
				this.ajax({
					url:'api/Property/settlementPropertyApi?user_id=4',
					data:{flag:1},
					method:'POST',
					header:{'content-type' : "application/json"},
					success:(res)=>{
					this.needPay=res.data.need>=0?res.data.need:-1*res.data.need
						
					}
				  })
			},
			// 缴纳月份选中显示
			getCheckMonth(){
				this.ajax({
					url:'api/Property/monthRadioCheckedApi?user_id=4',
					data:{
						flag:2
					},
					method:'POST',
					success:(res)=>{
						console.log(res)
						this.choseMonth=[]
						for(var i=0;i<res.data.length;i++){
							for(var j=0;j<this.monthList.length;j++){
								if(res.data[i].month==this.monthList[j].index){
									this.monthList[j].isShow=true
									this.monthList[j].flag=res.data[i].checked==1?true:false
									this.monthList[j].isDis=res.data[i].checked==1?true:false
								}
							}
						}
					}
				  })
			},
			// 物业缴费前置操作
			beforePay(n,type){   
				// flag	string	是	1,缴费2，预交费
				var data={}
				if(n==2){
					var arr=[]
					var str=''
					for(var i=0;i<this.choseMonth.length;i++){
						// arr.push(this.choseMonth[i])
						str+=this.choseMonth[i]+','
					}
					str=str.slice(0,-1)
					data.months=str
				}
				data.flag=n 
				this.ajax({
					url:'api/Property/settlementPropertyApi?user_id=4',
					data:data,
					method:'POST',
					header:{'content-type' : "application/json"},
					success:(res)=>{
						if(res.code!=200){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							return
						} 
							if(type=='wx'){
								this.xiaocpay(res.data,)
							}else{
								this.payH5(res.data)
							}
						
					}
				  })
			},
			// 选择支付月份
			clickRadio(v){
				if(v.isDis){
					return
				}
				v.flag=!v.flag
				this.choseMonth=[]
				for(var i=0;i<this.monthList.length;i++){
					if(v.flag){
						if(i<=(v.index-1)){
							this.monthList[i].flag=true
						}else{
							this.monthList[i].flag=false
						}
					}else{
						if(i<(v.index-1)){
							this.monthList[i].flag=true
						}else{
							this.monthList[i].flag=false
						}
					}
					if(this.monthList[i].flag&&!this.monthList[i].isDis&&this.monthList[i].isShow){
						this.choseMonth.push(i+1)
					}
				} 
				this.wantPay=this.one_price*this.choseMonth.length 
				this.wantPay=this.wantPay.toFixed(2) 
				
			},
			// 根据钱获取数据
			getMoneyByMonth(){
				// api/Property/monthRadioCheckedApi
				this.ajax({
					url:'api/Property/monthRadioCheckedApi',
					data:{},
					method:'POST',
					success:(res)=>{
						if(res.code!=200){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							return
						}
						this.headData=res.data
						
					}
				  })
			},
			// 获取头部信息
			getHeaddata(){
				this.ajax({
					url:'api/bill/getBillDetail',
					data:{},
					method:'POST',
					success:(res)=>{
						if(res.code!=200){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							return
						}
						this.headData=res.data
						
					}
				  })
			},
			xiaocpay(info){
				var that=this;
				var data={}
				var pay_type=1;//支付方式1，小程序，2，公众号，3支付宝
				// this.payType  1微信 2支付宝
				if(this.payType==2){
					pay_type=3;//支付宝 
				}else{
					
				}
				var type=1;//缴费类型
				var paymentMoney='';//金额
				// currentType 1电费 2水费 3 物业
				
				if(this.currentType==1||this.currentType==2){
					paymentMoney=this.amount
				}else{
					if(this.currentBill==1){
						// 待缴账单
						type=2
						var str=''
						paymentMoney=info.need>=0?info.need:-1*info.need
						for(var i=0;i<info.months.length;i++){
							str+=info.months[i]+','
						}
						str=str.slice(0,-1)
						data.months=str
					}else{
						// 预缴费用
						type=3
						paymentMoney=info.money
						var str=''
						for(var i=0;i<this.choseMonth.length;i++){
							str+=this.choseMonth[i]+','
						}
						str=str.slice(0,-1)
						data.months=str
					}
				}
				data.device_type=2
				
				data.fee_type=that.currentType
				data.type=type
				data.paymentMoney=paymentMoney
				data.pay_type=pay_type
				if(paymentMoney==''){
					uni.showToast({
						title:"请输入支付金额",
						icon:'none'
					});
					return false;
				} 
				// this.commitData=JSON.stringify(data)
				that.ajax({
					url:'api/payment_order/index',
					data,
					success:function(res){ 
						if(res.code!=200){
							uni.showToast({
								title:res.msg ,
								icon:'none'
							});
							return
						} 
						var paydata=res.data.return_Data;
						var orderId=res.data.orderArr.order_id 
						// uni.navigateTo({
						// 	url: `../payCode/payCode?orderNo=${res.data.orderArr.orderNo}&&amount=${that.amount}`
						// })
						uni.requestPayment({
						    provider: 'wxpay',
						    timeStamp: paydata.timeStamp,
						    nonceStr: paydata.nonceStr,
						    package: paydata.package,
						    signType: paydata.signType,
						    paySign: paydata.paySign,
						    success: function (res) { 
								uni.showToast({
									title:"支付成功",
									icon:'none'
								});
								uni.navigateTo({
									url:'../payDetails/payDetails?id='+orderId
								})
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
					}
				  })
			},
			payH5(info){
				var that=this;
				var data={}
				var pay_type=2;//支付方式1，小程序，2，公众号，3支付宝
				if(this.payType==2){
					pay_type=3;//支付宝
					console.log('支付宝')
				}else{
					
				}
				var type=1;//缴费类型
				var paymentMoney='';//金额
				// currentType 1电费 2水费 3 物业
				if(this.currentType==1||this.currentType==2){
					paymentMoney=this.amount
				}else{
					// console.log(money)
					if(this.currentBill==1){
						// 待缴账单
						var str=''
						type=2
						paymentMoney=info.need>=0?info.need:-1*info.need
						for(var i=0;i<info.months.length;i++){
							str+=info.months[i]+','
						}
						str=str.slice(0,-1)
						data.months=str
					}else{
						// 预缴费用
						type=3
						paymentMoney=info.money
						var str=''
						for(var i=0;i<this.choseMonth.length;i++){
							str+=this.choseMonth[i]+','
						}
						str=str.slice(0,-1)
						data.months=str
					}
				}
				data.device_type=2
				data.fee_type=that.currentType
				data.type=type
				data.paymentMoney=paymentMoney
				data.pay_type=pay_type 
				if(paymentMoney==''){
					uni.showToast({
						title:"请输入支付金额",
						icon:'none'
					});
					return false;
				}
				that.ajax({
					url:'api/payment_order/index',
					data,
					success:function(res){ 
						if(res.code!=200){
							uni.showToast({
								title:res.msg ,
								icon:'none'
							});
							return
						}
						var configJSON=JSON.parse(res.data.return_Data.configJSON);
						var optionJSON=JSON.parse(res.data.return_Data.optionJSON); 
						var orderId=res.data.return_Data.order.id 
						// uni.navigateTo({
						// 	url: `../payCode/payCode?orderNo=${res.data.orderArr.orderNo}&&amount=${that.amount}`
						// })
						//#ifdef H5
						 jweixin.config({
							debug: false,
						  appId: configJSON.appId,
						  timeStamp: configJSON.timestamp,
						  nonceStr: configJSON.nonceStr,
						  signature: configJSON.signature,
						  jsApiList: ['chooseWXPay']
						})
						//console.log(jweixin)
						 jweixin.ready(function () {
							  jweixin.chooseWXPay({
							    timestamp:optionJSON.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							    nonceStr: optionJSON.nonceStr, // 支付签名随机串，不长于 32 位
							    package: optionJSON.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							    signType: optionJSON.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							    paySign: optionJSON.paySign, // 支付签名
							    success: function (res) {
							      // 支付成功后的回调函数
								  uni.showToast({
								  	title:"支付成功" ,
								  	icon:'success'
								  });
								  uni.navigateTo({
								  	url:'../payDetails/payDetails?id='+orderId
								  }) 
							    },
								fail: function (res) {
								    uni.showToast({
								    	title:"支付失败" ,
								    	icon:'none'
								    });
								 }
							  });
							  
						 }) 
						 //#endif
					}
				  })
			},
			wxpay(){
				var that=this;
				that.ajax({
					url:'api/payment_order/index',
					data:{
						fee_type:3,
						type:2,
						paymentMoney:that.settlementDetails.pending,
						pay_type:2
					},
					success:function(res){
						
						
					}
				  })
			},
			showSettlementDetailsApi(){
				var that=this;
				that.ajax({
					url:'api/Property/showSettlementDetailsApi',
					method:'POST',
					data:{
						flag:1,
					},
					success:function(res){
						//console.log(res)
						that.settlementDetails=res.data
					}
				  })
				  that.ajax({
				  	url:'api/Property/showSettlementDetailsApi',
					method:'POST',
				  	data:{
				  		flag:2,
				  	},
				  	success:function(res){
				  		//console.log(res)
				  		that.settlementDetails2=res.data
				  	}
				    })
			},
			getPropertyPlanApi(){
				var that=this;
				that.ajax({
					url:'api/Property/getPropertyPlanApi',
					data:{
						plan_type:3,
					},
					success:function(res){
						//console.log(res)
						//that.userInfo=res.data
					}
				  })
			},
			//物业费缴费详细页面
			showPropertyApi(){
				var that=this;
				that.ajax({
					url:'api/Property/showPropertyApi',
					method:'POST',
					success:function(res){
						//console.log(res)
						//that.userInfo=res.data
						that.one_price=res.data.one_price
					}
				  })
			},
			payBtnClick(num){ 
				this.payType=num;
			},
			btnAmount(index) {
				this.current = index 
				// 根据点击判断选择金额
				if (index == 1) {
					this.amount = 10
				} else if (index == 2) {
					this.amount = 50
				} else {
					this.amount = 100
				}
				console.log(this.currentType)
			},
			payBtn(info, index) {
				if (info == 'electr') {
					this.currentType = 1
				} else if (info == 'water') {
					this.currentType = 2
				} else {
					this.currentType = 3
				}
			},
			btnBill(index) {
				if(this.needPay>0){
					uni.showToast({
					    title: '您还有费用未缴纳，无法预存费用',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				
				this.currentBill = index
				
				
				if(index==2){
					this.getCheckMonth()
				}
			},
			// 显示选择框
			displaySele(){
				this.isShowSele = !this.isShowSele
			},
			changeSele(info){ 
				this.month = info
				this.isShowSele = false
			},
			// 查看明细
			displayDeta(){
				this.showDeta = !this.showDeta
			}
		}, 
	}
</script>

<style lang="less" >
	.behalf_item_special{
		margin-bottom: 20rpx;
	}
	.check_box{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 50%;
		float: left;
		image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}
	.behalf_list_special{
		overflow: hidden;
	}
	.content {
		padding: 0 32rpx;
	}
    .payBtnImg{
		width: 40rpx;
		height: 40rpx;
	}
	.pay_list {
		padding: 0 30rpx;
		display: flex;
		height: 260rpx;

		.pay_item {
			margin-right: 50rpx;
			width: 180rpx;
			height: 210rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		& :nth-child(3) {
			margin-right: 0;
		}
	}

	// 余额详情
	.pay_balance {
		display: flex;
		margin: 20rpx 0;
		padding: 62rpx 32rpx 28rpx 52rpx;
		color: #fff;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/payImg/dain_w@2x.png) no-repeat;
		background-size: 100% 100%;
        justify-content: space-between;
		.balance_fl,
		.balance_fr {
			/* flex: 1; */
		}

		.balance_fl {
			& text:nth-child(1) {
				display: block;
				font-size: 51rpx;
			}

			& text:nth-child(2) {
				color: #C1DDDE;
				font-size: 30rpx;
			}
		}

		.balance_fr {
			font-size: 26rpx;
			line-height: 56rpx;
			color: #C1DDDE;

			& text:nth-child(2) {
				margin-left: 10rpx;
				color: #fff;
				font-size: 36rpx;
			}

			& text:nth-child(5) {
				margin-left: 10rpx;
				color: #fff;
				font-size: 36rpx;
			}
		}
	}

	// 电费剩余 
	.pay_balance2 {
		display: flex;
		margin: 20rpx 0;
		padding: 62rpx 32rpx 28rpx 52rpx;
		color: #fff;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/payImg/shui_w@2x.png) no-repeat;
		background-size: 100% 100%;
        justify-content: space-between;
		.balance_fl,
		.balance_fr {
			/* flex: 1; */
		}

		.balance_fl {
			& text:nth-child(1) {
				display: block;
				font-size: 51rpx;
			}

			& text:nth-child(2) {
				color: #C1DDDE;
				font-size: 30rpx;
			}
		}

		.balance_fr {
			font-size: 26rpx;
			line-height: 56rpx;
			color: #C1DDDE;

			& text:nth-child(2) {
				margin-left: 10rpx;
				color: #fff;
				font-size: 36rpx;
			}

			& text:nth-child(5) {
				margin-left: 10rpx;
				color: #fff;
				font-size: 36rpx;
			}
		}
	}

	// 物业费剩余
	.pay_balance3 {
		display: flex;
		margin: 20rpx 0;
		padding: 62rpx 32rpx 28rpx 52rpx;
		color: #fff;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/payImg/wu_w@2x.png) no-repeat;
		background-size: 100% 100%;
         justify-content: space-between;
		.balance_fl,
		.balance_fr {
			/* flex: 1; */
		}

		.balance_fl {
			& text:nth-child(1) {
				display: block;
				font-size: 51rpx;
			}

			& text:nth-child(2) {
				color: #C1DDDE;
				font-size: 30rpx;
			}
		}

		.balance_fr {
			font-size: 26rpx;
			line-height: 110rpx;
			color: #C1DDDE;
            padding-top: 36rpx;
			& text:nth-child(2) {
				margin-left: 10rpx;
				color: #fff;
				font-size: 36rpx;
			}

			& text:nth-child(5) {
				margin-left: 10rpx;
				color: #fff;
				font-size: 36rpx;
			}
		}
	}

	// 缴费方式
	.pay_way {
		.pay_amount {
			overflow: hidden; 
			.amount_mz {
				margin: 50rpx 0;
				display: block;
				font-size: 32rpx;
				color: #333;
			}

			.amount_list {
				padding-left: 8rpx;
				height: 120rpx;

				.amount_item {
					display: inline-block;
					margin-right: 54rpx;
					width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					color: #2AABAD;
					border: 2px solid #249B9D;
					border-radius: 20rpx;
				}

				& :last-child {
					margin-right: 0;
				}
			}

			.pay_input {
				height: 100rpx;
				color: #BFBFBF;
				border-bottom: 1px solid #bfbfbf;
			}
		}
 
	}

	// 提交r
	.pay_btn {
		margin-top: 40rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		background: #2aabad;
		border-radius: 45rpx;
		margin-bottom: 50rpx;
	}

	// 住户地址 物业页面显示
	.pay_address {
		padding: 0 40rpx;
		/* height: 200rpx; */
		line-height: 60rpx;
        padding-bottom: 30rpx;
		text {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
	}

	// 缴费账单
	.pay_jfzd {
		border-top: 10rpx solid #F7F9FB;

		.jfzd_top {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 160rpx 0 160rpx;
			height: 70rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 4rpx solid #F7F9FB;
		}

		.jfzd_con {
			padding: 50rpx 34rpx;
			font-size: 40rpx;

			& text:nth-child(2) {
				font-size: 48rpx;
				color: #F99600;
			}
		}
	}

	// 预缴费用
	.pay_prepaid {
		height: 600rpx;

		.prepaid_list {
			position: relative;
			.prepaid_item {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;

				& text:nth-child(1) {
					font-size: 30rpx;
				}

				.item_sele {
					font-size: 30rpx;
					// width: 140rpx;
					.sele_down{
						margin-left: 20rpx;
						width: 22rpx;
						height: 22rpx;
					}
				}
			}
			// 时间列表
			
			.sele_list{
				position: absolute;
				right: 8rpx;
				top: 228rpx;
				z-index: 10;
				border-radius: 20rpx;
				background-color: #F7F9FB;
				height: 240rpx;
				overflow: hidden;
				.sele_item{ 
					width: 200rpx;
					text-align: center;
					height: 80rpx;
					font-size: 28rpx;
					color: #333;
					line-height: 80rpx;
					border-radius: 10rpx; 
					letter-spacing: 4rpx;
				}
			}
		}

		.prepaid_sel {
			position: relative;
			left: -32rpx;
			padding: 0 30rpx;
			font-size: 30rpx;
			width: 690rpx;
			color: #333;
			height: 100rpx;
			line-height: 100rpx;
			background: #F7F9FB;

			& text:nth-child(3) {
				float: right;
				margin-right: 60rpx;
			}

			image {
				position: absolute;
				right: 32rpx;
				top: 40rpx;
				width: 27rpx;
				height: 27rpx;
			}
		} 
	}

	// 代缴费用
	.pay_behalf {

		.recharge{
			display: flex;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 36rpx;
			color: #F99600; 
			& text:nth-child(1){
				flex: 1;
				line-height: 96rpx;
			}
			& text:nth-child(2){
				display: inline-block; 
				width: 228rpx;
				height: 90rpx;
				line-height: 90rpx;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				background: #2aabad;
				border-radius: 45rpx;
			}
		}
	}
// 代缴账单的明细
		.behalf_top {
			padding: 20rpx 12rpx;
			font-size: 36rpx;

			& text:nth-child(2) {
				font-size: 48rpx;
				color: #F99600;
			}
		}

		.behalf_list {
			.behalf_item {
				& text:nth-child(1) {
					display: block;
					margin: 30rpx 0;
					color: #2AABAD;
					font-size: 30rpx;
				}

				.behalf_item2 {
					padding: 36rpx 39rpx;
					// height: 130rpx;
					background-color: #F7F9FB;

					.item2_top {
						display: flex;
						justify-content: space-between;
						height: 80rpx;

						& text:nth-child(1) {
							font-size: 32rpx;
							color: #333;
						}

						& text:nth-child(2) {
							font-size: 30rpx;
							line-height: 96rpx;
							color: #F99600;
						}
					}

					.item2_con {
						font-size: 28rpx;
						color: #333;
						.item2_con_mx{
							display: inline-block;
							margin-right: 30rpx;
						}
						.item2_img{
							width: 25rpx;
							height: 25rpx;
						}
						.item2_con_list{
							.item2_con_item{
								color: #999;
								font-size: 28rpx;
								height: 80rpx; 
								line-height: 80rpx;
							}
							.item2_con_item_special{
								position: relative;
								// background: white;
								margin-bottom: 6rpx;
								height: 60rpx;
								line-height: 60rpx;
							}
							.item2_con_item_special_pay{
								border: 1rpx solid #2AABAD;
							}
							.item2_con_item_special_nopay{
								border: 1rpx solid red;
							}
							.nopay_span{
								// color: red;
								position: absolute;
								top: 0;
								right: 0;
							}
						}
					}
				}
			}
		}
// 代缴账单的明细
	.way {
		.way_zffs {
			margin: 50rpx 0;
			display: block;
			font-size: 32rpx;
			color: #333;
		}

		.zffs_item {
			margin: 20rpx 0;
			font-size: 30rpx;
			color: #666;
			line-height: 66rpx;

			.item_img {
				margin-right: 30rpx;
				height: 66rpx;
				width: 66rpx;
			}

			.item_radio {
				float: right;
			}
		}
	}
	.txt_shadow{
		// text-shadow: 0px 3px 7px 0px rgba(33, 19, 35, 1.0); 
		// text-shadow: 0px 3px 7px #21130F;
	}
</style>
